<template>
  <div class="cnode">
    <div class="cnode_top">
      <div class="cnode_nav">
        <h2 class="cnode_logo">cnode</h2>
        <div class="cnode_input">
          <input type="text" placeholder="🔍">
        </div>

        <div class="cnode_classify">
          <p class="cnode_classify_item">首页</p>
          <p class="cnode_classify_item">新手入门</p>
          <p class="cnode_classify_item">API</p>
          <p class="cnode_classify_item">关于</p>
          <p class="cnode_classify_item">注册</p>
          <p class="cnode_classify_item">登录</p>
        </div>
      </div>

      <div class="cnode_container">
        <div class="cnode_filter">
          <p :class="this.isActive == 'all'?'item_active':''" @click="changeActive('all')">全部</p>
          <p :class="this.isActive == 'good'?'item_active':''" @click="changeActive('good')">精华</p>
          <p :class="this.isActive == 'share'?'item_active':''" @click="changeActive('share')">分享</p>
          <p :class="this.isActive == 'ask'?'item_active':''" @click="changeActive('ask')">问答</p>
          <p :class="this.isActive == 'job'?'item_active':''" @click="changeActive('job')">招聘</p>
          <p :class="this.isActive == 'test'?'item_active':''" @click="changeActive('test')">客户端测试</p>
        </div>
      </div>
    </div>

    <div class="cnode_contenter">
      <div class="cnode_content" @scroll="onScroll">
        <div class="cnode_content_item" v-for="(item, index) in showList" :key="index">
          <div class="cnode_content_img">
            <img :src="item.author.avatar_url" width="100%">
          </div>
          <div class="cnode_content_text">
            <div class="cnode_content_text_left">分享</div>
            <div class="cnode_content_right">
              <p class="cnode_content_title">{{item.title}}</p>
              <p class="cnode_content_count">{{item.reply_count}}/{{item.visit_count}}</p>
            </div>
          </div>
          <div class="cnode_content_time">{{item.create_at | timeFilter}}</div>
        </div>
      </div>
    </div>
    <p @click="backtop" v-show="isShow" class="cnode_loading">回到顶部</p>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      showList: [],
      isActive: 'all',
      isShow: false
    }
  },
  mounted() {
    axios.get('http://localhost:8080/list.json').then(res=> {
      // console.log(res.data.data)
      this.list = res.data.data;
      if(this.isActive == 'all') {
        this.showList = this.list;
      }else {
        this.list.forEach(item=> {
          if(item.tab == this.isActive) {
            this.showList.push(item)
          }
        })
      }
    }).catch(err=> {
      console.log(err)
    })
    var active = localStorage.active;
    if(active) {
      this.isActive = JSON.parse(localStorage.active)
    }
    window.addEventListener("scroll", this.showbtn, true);
  },
  filters: {
    timeFilter: function(val) {
      var timeStr = ''
      var now = new Date();
      var old = new Date(val)
      var time = (now - old) / 1000 / 60 / 60 / 24;
      var i = Math.trunc(time)
      timeStr = i + '天前'
      return timeStr
    }
  },
  methods: {
    changeActive(active) {
      this.showList = [];
      this.isActive = active;
      if(this.isActive == 'all') {
        this.showList = this.list;
      }else {
        this.list.forEach(item=> {
          if(item.tab == this.isActive) {
            this.showList.push(item)
          }
        })
      }
      localStorage.active = JSON.stringify(this.isActive);
    },
    onScroll() {
      console.log(111)
    },
     showbtn() {
      let that = this;
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      that.scrollTop = scrollTop;
      if(that.scrollTop >= 20) {
        this.isShow = true
      }else {
        this.isShow = false
      }
    },
     backtop() {
      var timer = setInterval(function() {
        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    }
  }
}
</script>

<style>
.cnode {
  background-color: #eee;
}
.cnode_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
  background-color: #eee;
}
.cnode_contenter {
  margin-top: 170px;
}
.cnode_nav {
  width: 100%;
  background-color: #444444;
  color: #eee;
}
.cnode_logo {
  padding: 10px;
}
.cnode_input input {
  width: 60%;
  height: 25px;
  border: none;
  background-color: #888888;
  border-radius: 25px;
  margin-left: 10px;
}
.cnode_classify {
  width: 100%;
  height: 40px;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.cnode_container {
  width: 100%;
  margin-top: 15px;
}
.cnode_filter {
  width: 100%;
  height: 40px;
  font-size: 14px;
  background-color: #F6F6F6;
  color: greenyellow;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item_active {
  color: #fff;
  background-color: greenyellow;
}
.cnode_content {
  width: 100%;
  background-color: #fff;
}
.cnode_content::-webkit-scrollbar {
  display: none;
}
.cnode_content_item {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cnode_content_img {
  width: 10%;
  height: 40px;
}
.cnode_content_text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 80%;
}
.cnode_content_text_left {
  font-size: 15px;
  padding: 0 2px;
  margin: 0 5px;
  border-radius: 2px;
  color: #fff;
  background-color: greenyellow;
}
.cnode_content_right {
  width: 80%;
}
.cnode_content_title {
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.cnode_content_count {
  font-size: 13px;
  color: #666;
}
.cnode_content_time {
  width: 15%;
  font-size: 12px;
  color: #666;
}
.cnode_loading {
  position: fixed;
  top: 500px;
  right: 0;
  width: 20px;
  padding: 5px;
  color: #666;
  background-color: #eee;
}
</style>